<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>type</title>
    <link rel="stylesheet" href="./css/type.css">
    <link rel="stylesheet" href="./css/iconfont.css">

</head>

<body>
    <div class="web">
        <header>
            <div class="nav">
                <div class="back">
                    <span>Back</span>
                </div>
                <span>分类</span>
                <div class="city_box">
                    <select name="" id="">
                        <option value="">广州</option>
                        <option value="">深圳</option>
                        <option value="">杭州</option>
                    </select>
                </div>
            </div>

        </header>




        <section>
            <div class="image_box">
                <img src="./images/type_03.png" alt="">
                <img src="./images/type_03.png" alt="">
                <img src="./images/type_03.png" alt="">
                <img src="./images/type_03.png" alt="">
            </div>
            <div class="text">
                <span>美食</span>
                <span>美食</span>
                <span>美食</span>
                <span>美食</span>
            </div>
            <div class="more">
                <div class="right">
                    <i class="iconfont icon-icon-test" style="font-size:34px;"></i>
                    <span>美食类</span>
                </div>
                <div class="left">
                    <span>更多</span>
                    <div class="box">

                        <i class="iconfont icon-youjiantou"></i>
                    </div>
                </div>

            </div>


            <div class="food">
                <img src="./images/type_16.png" alt="">
                <img src="./images/type_16.png" alt="">
                <img src="./images/type_16.png" alt="">
                <img src="./images/type_16.png" alt="">
            </div>


            <div class="more">
                <div class="right">
                    <i class="iconfont icon-yundong" style="font-size:34px;"></i>
                    <span>运动类</span>
                </div>
                <div class="left">
                    <span>更多</span>
                    <div class="box">

                        <i class="iconfont icon-youjiantou"></i>
                    </div>
                </div>

            </div>


            <div class="food">
                <img src="./images/type_16.png" alt="">
                <img src="./images/type_16.png" alt="">
                <img src="./images/type_16.png" alt="">
                <img src="./images/type_16.png" alt="">
            </div>



            <div class="more">
                <div class="right">
                    <i class="iconfont icon-dianying" style="font-size:34px;"></i>
                    <span>电影类</span>
                </div>
                <div class="left">
                    <span>更多</span>
                    <div class="box">

                        <i class="iconfont icon-youjiantou"></i>
                    </div>
                </div>

            </div>


            <div class="food">
                <img src="./images/type_16.png" alt="">
                <img src="./images/type_16.png" alt="">
                <img src="./images/type_16.png" alt="">
                <img src="./images/type_16.png" alt="">
            </div>








        </section>

 
        <footer>
                <!--ul.clearfix>(li.fl>a>i.iconfont.icon-xueshimao+p{首页})*5-->
                <div class="left_right">

         
                <ul class="clearfix">
                    <li class="fl">
                        <a class="active" href="index.html">
                            <i class="iconfont icon-shouye-weixuanzhong"
                            style="font-size:34px;"></i>
                            <p>首页</p>
                        </a>
                    </li>
                    <li class="fl">
                        <a href="type.html">
                                <i class="iconfont icon-leimupinleifenleileibie"
                                style="font-size:34px;"></i>
                            <p>分类</p>
                        </a>
                    </li>
                    <li class="fl">
                        <a href="find.html">
                                <i class="iconfont icon-faxian"
                                style="font-size:34px;"></i>
                            <p>发现</p>
                        </a>
                    </li>
                    <li class="fl">
                        <a href="myself.html">
                                <i class="iconfont icon-yonghu"
                                style="font-size:34px;"></i>
                            <p>我的</p>
                        </a>
                    </li>
                   
                </ul>

            </div>
            </footer>




    </div>
</body>

</html>